<template>
	<view id="myMachine">
		<view class="machineTop">
			<view class="total">
			   <view class="num">{{userData.total}}</view>
			   <view class="name">累计</view>
			</view>
			
			<view class="month">
			   <view class="monthList">
			     <view class="num">{{userData.new_add}}</view>
			     <view class="name">本月新增</view>
			   </view>
			   <view class="monthList">
			     <view class="num">{{userData.last_add}}</view>
			     <view class="name">上月进货</view>
			   </view>
			</view>
			
		</view>
		<view style="background-color: #FFF;padding:20rpx 0;">
			<qiun-data-charts class="dataChart" style="min-height:500rpx;" type="line" :opts="chartConfig" :chartData="chartData" />
		</view>
		<view style="padding:20rpx">机具汇总</view>
		<uni-collapse  accordion >
			<view v-for="(item,index) in list" :key="index">
				<uni-collapse-item :title="item.pabbreviation" :thumb="item.cover?item.cover:'../../static/logo.png'">
					<view class="content" v-for="(pr,pi) in item.data" :key="pi">
						<image :src="pr.cover" class="imgs" v-if="pr.cover"></image>
						<image src="../../static/logo.png" class="imgs" v-else></image>
						<text class="text">{{pr.productName}}</text>
						<text class="icon">{{pr.productCount}}</text>
					</view>
				</uni-collapse-item>
			</view>
		</uni-collapse>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userData:{
					total:0,
					new_add:0,
					last_add:0
				},
				list:[],
				chartConfig:{
					legend:{
						show:false//是否显示图例
					},
					xAxis:{
						fontSize:12,
						calibration:true
					}
				},
				chartData: {
					categories:[],
					series:[]
				}
			}
		},
		mounted() {
			this.getUserData()
			this.getChartData()
			this.getProduct()
		},
		methods: {
			//个人信息
			getUserData(){
				this.httpClient.post('stock/app/stock/index', {}).then(res=>{
					if(res.code==200){
						this.userData=res.data
					}
				})
			},
			getProduct(){
				this.httpClient.post('stock/app/stock/getProductCountTreeList', {}).then(res=>{
					if(res.code==200){
						this.list=res.data
					}
				})
			},
			//图表数据
			getChartData(){
				this.httpClient.post('stock/app/stock/tableData', {}).then(res=>{
					if(res.code==200){
						this.chartData={
							categories:res.data.mon,
							series: [{
								name:'机具',
								data: res.data.data
							}]
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	#myMachine{
		.machineTop{
			height: 8.5rem;
			background: $uni-color-primary;
			color: #fff;
			.total{
				text-align: center;
				padding-top: 1rem;
			}
			.name{
				font-size: 0.85rem;
			}
			.num{
				font-size: 1.2rem;
			}
			.month{
				display: flex;
				align-items: center;
			}
			.monthList{
				flex: 1;
				text-align: center;
			}
		}
		.content{
			padding:20rpx 20rpx 20rpx 80rpx;border-top:1rpx dashed #eee;color:#888;
			display:flex;align-self: center;
			.imgs{
				width:50rpx;height:50rpx;
			}
			.text{
				flex:1;line-height:50rpx;margin-left:20rpx;
			}
			.icon{
				width:100rpx;
				i.iconfont{
					font-sizse:24rpx;color:#CCC;
				}
			}
		}

	}
</style>
